<div class="guide-box ccenter">
  <div class="left-box">
    <div class="stitle">
      aily blockly IDE
      <div class="version">ver {{version}}</div>
    </div>
    <div class="title">{{'GUIDE.START' | translate}}</div>
    @if (showMenu) {
    <div class="menu-box">
      @for (item of guideMenu; track $index) {
      @if (item.sep) {
      <div class="sep"></div>
      } @else {
      <div class="btn link" (click)="onMenuClick(item)">
        <div class="icon ccenter">
          <i class="{{ item.icon }}"></i>
        </div>
        <div class="text">{{ item.name | translate}}</div>
      </div>
      }
      }
    </div>
    }
    <div style="min-height: 150px;">
      @if(recentlyProjects.length > 0) {
      <div class="title">{{'GUIDE.RECENTLY' | translate}}</div>
      <div class="menu-box">
        @for(project of recentlyProjects; track $index) {
        <div class="project btn link" (click)="openProjectByPath(project)">
          {{project.name}}
          <div class="path ellipsis">{{project.path}}</div>
        </div>
        }
        <!-- <div class="project btn link" (click)="showMore=true">
        更多...
      </div> -->
      </div>
      }
    </div>
  </div>
  <div class="right-box ccenter">
    <!-- <iframe src="https://ide.clz.me/" frameborder="0" allowpopups="true" class="pp"></iframe> -->
    <div class="item" (click)="gotoPlayground()">
      <div>{{'GUIDE.TUTORIAL' | translate}}</div>
      <div>{{'GUIDE.TUTORIAL_DESC' | translate}}</div>
    </div>
    <div class="item" (click)="openUrl('https://github.com/ailyProject/aily-blockly/blob/master/VERSION.md')">
      <div>{{'GUIDE.VERSION_INFO' | translate}}</div>
      <div>{{'GUIDE.VERSION_INFO_DESC' | translate}}</div>
    </div>
    <div class="item" (click)="openUrl('https://github.com/ailyProject/aily-blockly')">
      <div>{{'GUIDE.GITHUB' | translate}}</div>
      <div>{{'GUIDE.GITHUB_DESC' | translate}}</div>
    </div>
    <div class="item" (click)="openUrl('https://github.com/ailyProject/aily-blockly/issues')">
      <div>{{'GUIDE.FEEDBACK' | translate}}</div>
      <div>{{'GUIDE.FEEDBACK_DESC' | translate}}</div>
    </div>
    <div class="item" style="height: 165px;">
      <div>{{'GUIDE.WECHAT_GROUP' | translate}}</div>
      <div>{{'GUIDE.WECHAT_GROUP_DESC' | translate}}</div>
      <img class="qrcode" src="https://dl.diandeng.tech/blockly/wechat.jpg" alt="" srcset="">
    </div>
  </div>
</div>